﻿<h4>Example</h4>

<FluentStack VerticalAlignment="VerticalAlignment.Center" Style="margin-left: 32px;">
    <FluentRating Max="@_maxValue"
                  @bind-Value="@_value"
                  IconFilled="@_iconFilled"
                  IconOutline="@_iconOutline"
                  ReadOnly="@_readOnly"
                  IconColor="@_iconColor"
                  Disabled="@_disabled" ,
                  AllowReset="@_allowReset" />

    <FluentLabel>Value: @_value</FluentLabel>
</FluentStack>

<hr />

<FluentStack HorizontalGap="100">
    <div>
        <FluentSelect Label="ReadOnly"
                      @bind-SelectedOption="@_readOnly"
                      Style="@FixedWidth"
                      Items="@(new[] { true, false })" />

        <FluentSelect Label="AllowReset"
                      @bind-SelectedOption="@_allowReset"
                      Style="@FixedWidth"
                      Items="@(new[] { true, false })" />

        <FluentSelect Label="Disabled"
                      @bind-SelectedOption="@_disabled"
                      Style="@FixedWidth"
                      Items="@(new[] { true, false })" />
    </div>
    <div>
        <FluentNumberField TValue="int"
                           Label="Max Value"
                           Style="@FixedWidth"
                           Min="1"
                           Max="20"
                           @bind-Value="@_maxValue" />

        <FluentSelect Label="Color"
                      @bind-SelectedOption="@_iconColor"
                      Style="@FixedWidth"
                      Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
                      OptionValue="@(i => i.ToAttributeValue())" />

        <FluentSelect Label="Icons"
                      TOption="string"
                      SelectedOptionChanged="@SetIcon"
                      Style="@FixedWidth"
                      Items="IconsName" />
    </div>
</FluentStack>

@code
{
    readonly string FixedWidth = "max-width: 100px; min-width: 100px; margin: 10px;";
    readonly List<string> IconsName = ["Heart", "Star", "Alert", "PersonCircle"];
    readonly Icon[] IconsFilled = new Icon[]
    {
        new Icons.Filled.Size20.Heart(),
        new Icons.Filled.Size20.Star(),
        new Icons.Filled.Size20.Alert(),
        new Icons.Filled.Size20.PersonCircle(),
    };
    readonly Icon[] IconsOutline = new Icon[]
    {
        new Icons.Regular.Size20.Heart(),
        new Icons.Regular.Size20.Star(),
        new Icons.Regular.Size20.Alert(),
        new Icons.Regular.Size20.PersonCircle(),
    };

    bool _readOnly = false;
    bool _disabled = false;
    bool _allowReset = false;
    int _maxValue = 10;
    int _value = 2;
    Color _iconColor = Color.Error;

    Icon _iconFilled = new Icons.Filled.Size20.Star();
    Icon _iconOutline = new Icons.Regular.Size20.Star();
    

    void SetIcon(string? name)
    {
        var index = name is null ? 0 : IconsName.IndexOf(name);

        _iconFilled = IconsFilled[index];
        _iconOutline = IconsOutline[index];
    }

    protected override void OnParametersSet() => SetIcon(null);
}
